<template>
  <div>
      <q-card-separator  style="height:3px"/>
        <q-item>
          <q-item-main>
            <q-item-tile label>全部回复：</q-item-tile>
          </q-item-main>
        </q-item>
      <q-card-separator/>
      <br>
      <h6 style="text-align: center;" v-if="replys.length<=0">
      <q-icon name="insert emoticon" color="blue"/> 空空如也</h6>
      <common-compo v-else v-on:trigger-refresh="refresher"
        :enableScrollLoading="scrollLoading"  enableToTop >
        <div v-for="reply in replys" :key="reply.id" slot="content">
            <q-item>
              <q-item-side :avatar="(reply.replySrcuser.logoRes || 'statics/hg-logo-head.png') | avatarView"
                 @click="$router.push('/personal/personal-home?customerId='+reply.replySrcuser.id)"/>
              <q-item-main>
                <q-item-tile label>{{reply.replySrcuser.nickname}}</q-item-tile>
                <q-item-tile sublabel>{{reply.createdDate | formatDateToTime}}</q-item-tile>
              </q-item-main>
              <q-item-side>
                  <q-btn flat round small :color="reply.liked ? 'teal': ''" @click="likedReplyAction(reply)" icon="thumb_up">
                    {{reply.likedcount | convertNum}}
                  </q-btn>
              </q-item-side>
            </q-item>
            <q-item><q-item-main>{{reply.content}}</q-item-main></q-item>
			
           <q-item v-if="hasDetails" link  @click="toReplyDetail(reply.id)"  v-ripple.mat>
              <q-item-main align="right" >
                  <q-item-tile color="teal">回复({{reply.replycount}})详情>></q-item-tile>
              </q-item-main>
            </q-item>
			      <q-card-separator/>
        </div>
      </common-compo>
  </div>
</template>

<script>
import {
  QCard,
  QCardTitle,
  QCardMedia,
  QCardActions,
  QCardSeparator,
  QCardMain,
  QItem,
  QItemMain,
  QItemSide,
  QItemTile,
  QBtn,
  QIcon,
  Ripple,
  Alert
} from "quasar";
import commonCompo from "../common-compo";
import replyApi from "../../../https/replyApi";

export default {
  components: {
    commonCompo,
    QCard,
    QCardTitle,
    QCardMedia,
    QCardActions,
    QCardSeparator,
    QCardMain,
    QItem,
    QItemMain,
    QItemSide,
    QItemTile,
    QBtn,
    QIcon,
    Alert
  },
  data() {
    return {
      scrollEle: null,
      replys: [],
      page: 0,
      totalPages: 0,
      scrollLoading: false
    };
  },
  directives: {
    Ripple
  },
  props: {
    hasDetails: { type: Boolean, default: false },
    isTopic: { type: Boolean, default: false },
    replyTarid: { type: Number, default: -1 }
  },
  mounted() {
    console.log("isTopic=", this.isTopic, ",replyTarid=", this.replyTarid);
    this.loadData();
  },
  methods: {
    clearDatas(){
      this.replys = [],
      this.page = 0,
      this.totalPages=0,
      this.scrollLoading=false
    },
    loadData() {
      //测试：
        // this.totalPages = 3;
        // this.replys = this.replys.concat([
        //   {
        //     id: this.page + 100,
        //     replySrcuser: {
        //       logoRes: "statics/boy-avatar.png",
        //       nickname: "李晨"
        //     },
        //     createdDate: Date.now(),
        //     liked: false,
        //     likedcount: 400,
        //     replycount: 100,
        //     allowDel: true,
        //     content: "这个我怎么知道啊"
        //   }
        // ]);
     const _prelength = this.replys.length
     replyApi
        .list("?size=20&isTopic=" +
            this.isTopic +
            "&replyTarid=" +
            this.replyTarid +
            "&page=" + this.page
        )
        .then(res => {
          const { status, data:{content,totalPages}} = res;
          if (status == 200 && content) {
            console.log('当前回复列表：',res.data);
            this.totalPages = totalPages;
            this.replys = this.replys.concat(content);
            this.isStopRefresher(_prelength,this.replys.length);
          }
        })
        .catch(err => {});
    },
    alertMsg(msg) {
      if (msg) {
        const _errAlert = Alert.create({
          color: 'warning',
          icon: 'info',
          html: msg,
          position: 'bottom',
        });
         setTimeout(()=>{
          _errAlert.dismiss();
        },3000);
      }
    },
    likedReplyAction(reply) {
      //是否是主题
      const _liked = reply.liked;
      //处理点赞
      if (_liked) {
        this.alertMsg('您已经赞过了')
        //  reply.liked = false;
        //  reply.likedcount--;
        //  replyApi
        //   .likedCancel(reply.id)
        //   .then(res => {
        //     console.log("取消点赞回复");
        //   })
        //   .catch(err => {});
      } else {
        reply.liked = true;
        reply.likedcount++;
        replyApi
          .liked(reply.id)
          .then(res => {
            console.log("点赞帖子");
          })
          .catch(err => {});
      }
      console.log("处理点赞：", reply.likedcount);
    },
    delDialog(id) {
      //删除对话框，ID标识
      const _this = this;
      Dialog.create({
        title: "谨慎操作",
        message: '删除后，数据不可恢复，您确定要继续嘛?',
        position: "right",
        buttons: [
          {
            label: "确定",
            color: "negative",
            outline: true,
            handler() {
              _this.$router.go(-1);
            }
          },
          {
            label: "取消",
            raised: true,
            handler() {
              console.log("取消删除");
            }
          }
        ]
      });
    },
    toReplyDetail(replyId) {
      this.$router.push("/community/reply-detail?replyId=" + replyId);
    },
    refresher(_ele) {
      this.scrollEle = _ele;
      this.scrollLoading = true;
      this.page++;
      console.log("控制滚动元素：page=",this.page,",totalPages=",this.totalPages);
      if (this.page > this.totalPages-1) {
        _ele.stop();
        this.scrollLoading = false;
        return;
      }
      this.loadData();
    },
    isStopRefresher(_prelength,_suflength) {
      console.log("前,", _prelength, "后,", _suflength);
      if (_prelength == _suflength) {
        console.log('停止滚动');
        this.scrollEle.stop();
        this.scrollLoading = false;
      }
    }
  }
};
</script>
